<div
  class="ui-paginator-bottom ui-paginator ui-widget ui-widget-header ui-unselectable-text ui-helper-clearfix"
>
  <a
    class="ui-paginator-first ui-paginator-element ui-state-default ui-corner-all"
    [class.ui-state-disabled]="value === 1"
    tabindex="-1"
    (click)="changePage(1)"
    ><span class="ui-paginator-icon pi pi-step-backward"></span></a
  ><a
    class="ui-paginator-prev ui-paginator-element ui-state-default ui-corner-all"
    [class.ui-state-disabled]="value === 1"
    tabindex="-1"
    (click)="changePage(value - 1)"
    ><span class="ui-paginator-icon pi pi-caret-left"></span></a
  ><span class="ui-paginator-pages"
    ><a
      *ngFor="let page of pageArray; trackBy: trackByFn"
      (click)="changePage(page)"
      class="ui-paginator-page ui-paginator-element ui-state-default ui-corner-all"
      [class.ui-state-active]="page === value"
      tabindex="0"
      >{{ page }}</a
    ></span
  ><a
    class="ui-paginator-next ui-paginator-element ui-state-default ui-corner-all"
    [class.ui-state-disabled]="value === totalPages"
    tabindex="0"
    (click)="changePage(value + 1)"
    ><span class="ui-paginator-icon pi pi-caret-right"></span></a
  ><a
    class="ui-paginator-last ui-paginator-element ui-state-default ui-corner-all"
    [class.ui-state-disabled]="value === totalPages"
    tabindex="0"
    (click)="changePage(totalPages)"
    ><span class="ui-paginator-icon pi pi-step-forward"></span
  ></a>
</div>
